import G6 from '@antv/g6';
import { COLOR } from 'src/utils/color.js';

G6.registerEdge('line-arrow', {
  draw(cfg, group) {
    const { startPoint, endPoint } = cfg;
    const isDown = endPoint.y > startPoint.y
    const keyShape = group.addShape('path', {
      attrs: {
        path: [
          ['M', startPoint.x, startPoint.y],
          // ['L', startPoint.x, endPoint.y / 3 + (2 / 3) * startPoint.y],
          // ['L', endPoint.x, endPoint.y / 3 + (2 / 3) * startPoint.y],
          ['L', startPoint.x, isDown ? startPoint.y + (endPoint.y - startPoint.y) / 3 : startPoint.y + 20],
          ['L', endPoint.x + (startPoint.x - endPoint.x) / 2, isDown ? startPoint.y + (endPoint.y - startPoint.y) / 3 : startPoint.y + 20],
          ['L', endPoint.x + (startPoint.x - endPoint.x) / 2, isDown ? endPoint.y - (2 / 3) * (endPoint.y - startPoint.y) : endPoint.y - 20],
          ['L', endPoint.x, isDown ? endPoint.y - (2 / 3) * (endPoint.y - startPoint.y) : endPoint.y - 20],
          ['L', endPoint.x, endPoint.y],
        ],
        stroke: cfg.color ? COLOR[cfg.color] : COLOR._BLACK,
        lineWidth: cfg.color ? 3 : 1,
        endArrow: {
          path: 'M 6,0 L -6,-6 L -6,6 Z',
          d: 8,
        },
      },
    });
    // 如果有label或者percent
    if (cfg.label || cfg.percent) {
      const label =
        cfg.percent !== null && cfg.percent
          ? cfg.label
            ? `${cfg.label}:${cfg.percent}%`
            : `${cfg.percent}%`
          : cfg.label;
      group.addShape('text', {
        attrs: {
          x:
            Math.abs(endPoint.x - startPoint.x) < 40
              ? startPoint.x + 20
              : startPoint.x + (endPoint.x - startPoint.x) / 2, // 居中
          y: endPoint.y / 3 + (2 / 3) * startPoint.y - 10,
          textAlign: 'center',
          textBaseline: 'middle',
          text: label,
          fill: COLOR._GRAY,
        },
      });
    }
    return keyShape;
  },
  // 响应状态变化
  setState(name, value, item) {
    const group = item.getContainer();
    const shape = group.get('children')[0]; // 顺序根据 draw 时确定
    if (name === 'active') {
      if (value) {
        shape.attr('lineWidth', 3);
      } else {
        shape.attr('lineWidth', 1);
      }
    }
    if (name === 'selected') {
      if (value) {
        shape.attr('stroke', COLOR._ORANGE);
        shape.attr('lineWidth', 3);
      } else {
        shape.attr('stroke', COLOR._BLACK);
        shape.attr('lineWidth', 1);
      }
    }
    if (name === 'warning') {
      if (value) {
        shape.attr('stroke', COLOR._RED);
        shape.attr('lineWidth', 1);
      } else {
        shape.attr('stroke', COLOR._BLACK);
        shape.attr('lineWidth', 1);
      }
    }
    if (name === 'compare') {
      if (value) {
        shape.attr('lineWidth', 3);
      } else {
        shape.attr('lineWidth', 3);
      }
    }
    if (name === 'result') {
      if (value) {
        shape.attr('lineWidth', 3);
      } else {
        shape.attr('lineWidth', 3);
      }
    }
  },
});
